<template>
  <nav class="mynavicontent site-navbar" :class="'site-navbar--' + navbarLayoutType">
    <div class="site-navbar__header">
      <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
        <a class="site-navbar__brand-lg" href="javascript:;">彩味塔</a>
      </h1>
    </div>
    <div class="site-navbar__body clearfix">
      <el-menu
        class="site-navbar__menu"
        mode="horizontal">
        <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
          <icon-svg name="zhedie"></icon-svg>
        </el-menu-item>
      </el-menu>

      <el-menu
        class="site-navbar__menu site-navbar__menu--right"
        mode="horizontal">
        <el-menu-item class="box2">
          <el-button v-if="shopStatus==0" size="mini" type="primary" @click.native="closeShop(1)">开店营业</el-button>
          <el-tag v-else-if='shopStatus==1' size="big" disable-transitions type="primary" style="width:80px;height:28px;text-align:center;line-height:28px;" @click.native="closeShop(0)">关店打烊</el-tag>
        </el-menu-item>
        <el-menu-item @click="$router.push('/registeMore')" class="box2">
          <div><img src="../../static/img/open.png" alt=""></div>
          <div>开分店</div>
        </el-menu-item>
        <el-menu-item class="box2">
          <div><img src="../../static/img/group.png" alt=""></div>
          <div>社区</div>
        </el-menu-item>
        <el-menu-item class="site-navbar__avatar">
          <div class="box3" @click="openRightSidebar = !openRightSidebar">
            <img src="../../static/img/head.png" alt="" style="height:40px;margin:0;padding:0;">
            <div class="switchMerchant">
              <div class="userName">{{ userName }}</div>
              <div class="underTit">
                <img src="../../static/img/switch.png" alt="">
                <span>切换店铺</span>
              </div>
            </div>
          </div>
        </el-menu-item>
      </el-menu>
    </div>
  </nav>
</template>

<script>
  import UpdatePassword from './main-navbar-update-password'
  import { clearLoginInfo } from '@/utils'
  export default {
    data () {
      return {
        updatePassowrdVisible: false,
        openRightSidebar: false,
      }
    },
    components: {
      UpdatePassword
    },
    computed: {
      shopId:{
        get (){ return this.$store.state.user.shopId },
      },
      navbarLayoutType: {
        get () { return this.$store.state.common.navbarLayoutType }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold },
        set (val) { this.$store.commit('common/updateSidebarFold', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      userName: {
        get () { return this.$store.state.user.name }
      },
      shopStatus:{
        get() {
          this.status = this.$store.state.user.shopStatus
          return this.$store.state.user.shopStatus
        },
        set(val){ this.$store.commit('user/updateShopStatus',val) }
      },
    },
    watch: {
      openRightSidebar(val){
        this.$emit('changeSidebarState')
      }
    },
    methods: {
      // 修改密码
      updatePasswordHandle () {
        this.updatePassowrdVisible = true
        this.$nextTick(() => {
          this.$refs.updatePassowrd.init()
        })
      },

    closeShop(val){
      this.$http({
        url: this.$http.adornUrl("/shop/shopDetail/shopStatus?shopId="+this.shopId+"&shopStatus="+val),
        method: 'put',
      }).then(({data}) => {
        if (data === 'success') {
          this.$message({
            message:'操作成功',
            type:'success'
          })
          this.shopStatus = !this.shopStatus
        }
      })
    },

      // 退出
      logoutHandle () {
        this.$confirm(`确定进行[退出]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/logout'),
            method: 'post',
            data: this.$http.adornData()
          }).then(({data}) => {
            clearLoginInfo()
            this.$router.push({ name: 'login' })
          })
        }).catch(() => {})
      },

      // openSideBar(){
      //   console.log('opensidebar');
      //   this.$emit('openRightSideBar')
      // }
    }
  }
</script>
<style scoped>
.mynavicontent >>>.el-menu--horizontal>.el-menu-item{
  height: 50px;
  line-height: 50px;
}
.mynavicontent>>> .el-menu-item *{
  vertical-align: baseline;
}


  .box2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 3px;
    font-size: 10px;
  }
  .box2 div{
    height: 20px;
    line-height: 20px;
    margin: 2px;
  }

  .box3{
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6C6C6C;
    font-size: 16px;
  }
  .switchMerchant{
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .switchMerchant div{
    height: 20px;
    line-height: 20px;
    width: 100%;
    text-align: center;
  }
  .switchMerchant .underTit{
    font-size: 6px;
    color: #D7D7D7;
  }
  .switchMerchant .underTit img{
    width: 9px;
  }


</style>>


